<template>
    <div class="data-content">
        <div style="font-size: 12pt;height: 40px; line-height: 40px; border: 1px solid #ddd; box-sizing: border-box;padding-left:20px;color:#348bda;margin-top:10px;border-bottom:0px">
           <i class="icon ion-ios-color-wand"></i>行政处理决定信息 
        </div>
        <table class="layui-table">
            <colgroup>
                <col width="60">
                <col width="200">
                <col width="120">
                <col>
                <col width="160">
                <col width="160">
                <col width="120">
            </colgroup>
            <thead>
            <tr>
                <th v-for="(item, index) in table0Data.titles" :key="index">{{ item }}</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="(trContent, index) in table0Data.list" :key="index">
                    <td v-for="(colName, colNum) in table0Data.titles" :key="colNum">
                        <div v-if="trContent.trContents[0].colVal != '没有记录'">
                            {{ trContent.trContents[colNum].colVal }}
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <div style="display: block; height: 20px"></div>
        <div style="font-size: 12pt;height: 40px; line-height: 40px; border: 1px solid #ddd; box-sizing: border-box;padding-left:20px;color:#348bda;margin-top:10px;border-bottom:0px">
           <i class="icon ion-ios-color-wand"></i>违法信息
        </div>
        <table class="layui-table">
            <colgroup>
                <col width="60">
                <col width="200">
                <col>
                <col width="160">
                <col width="120">
            </colgroup>
            <thead>
                <tr>
                    <th v-for="(item, index) in table1Data.titles" :key="index">{{ item }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(trContent, index) in table1Data.list" :key="index">
                    <td v-for="(colName, colNum) in table1Data.titles" :key="colNum">
                        <div v-if="trContent.trContents[0].colVal != '没有记录'">
                            {{ trContent.trContents[colNum].colVal }}
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <div style="display: block; height: 20px"></div>
        <div style="font-size: 12pt;height: 40px; line-height: 40px; border: 1px solid #ddd; box-sizing: border-box;padding-left:20px;color:#348bda;margin-top:10px;border-bottom:0px">
           <i class="icon ion-ios-color-wand"></i>欠薪及欠缴社保金信息
        </div>
        <table class="layui-table">
            <colgroup>
                <col width="60">
                <col width="200">
                <col width="120">
                <col>
                <col>
                <col width="120">
            </colgroup>
            <thead>
                <tr>
                    <th v-for="(item, index) in table2Data.titles" :key="index">{{ item }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(trContent, index) in table2Data.list" :key="index">
                    <td v-for="(colName, colNum) in table2Data.titles" :key="colNum">
                        <div v-if="trContent.trContents[0].colVal != '没有记录'">
                            {{ trContent.trContents[colNum].colVal }}
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <div style="display: block; height: 20px"></div>
        <div style="font-size: 12pt;height: 40px; line-height: 40px; border: 1px solid #ddd; box-sizing: border-box;padding-left:20px;color:#348bda;margin-top:10px;border-bottom:0px">
           <i class="icon ion-ios-color-wand"></i>行业自律机构处罚记录
        </div>
        <table class="layui-table">
            <colgroup>
                <col width="60">
                <col width="200">
                <col>
                <col>
                <col>
                    <col>
                <col width="120">
                    <col width="120">
            </colgroup>
            <thead>
                <tr>
                    <th v-for="(item, index) in table3Data.titles" :key="index">{{ item }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(trContent, index) in table3Data.list" :key="index">
                    <td v-for="(colName, colNum) in table3Data.titles" :key="colNum">
                        <div v-if="trContent.trContents[0].colVal != '没有记录'">
                            {{ trContent.trContents[colNum].colVal }}
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <el-link type="info" :underline="false">*此数据来源于全国水利建设市场信用信息平台官方网站</el-link>
    </div>
</template>

<script>
export default {
    props: {
        shuiliComId: {
            type: String,
            default: "",
        },
        projectId: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            table0Data: {
                list:[],
                titles:[]
            },
            table1Data: {
                list:[],
                titles:[]
            },
            table2Data: {
                list:[],
                titles:[]
            },
            table3Data: {
                list:[],
                titles:[]
            }
        }
    },
    watch:{
        shuiliComId:{
            handler(n,o){
                this.getBuliang();
            },
            deep:true,
        }
    },
    methods: {
        //获取企业基本信息
        getBuliang() {
            var that = this;
            if(!that.shuiliComId){return}
            this.$ajax({
                type: "get",
                url: `${this.$store.state.api.searchUrl}/searchshuili/shuili/blxw`,
                data: {
                    comId: that.shuiliComId,
                    projectId: that.projectId,
                },
                callback: function (data, res) {
                    let stringData =  JSON.stringify(data)
                    if(stringData != "{}"){
                        that.table0Data = data.table0;
                        that.table1Data = data.table1;
                        that.table2Data = data.table2;
                        that.table3Data = data.table3;
                    }
                    
                },
            });
        },
    },
    mounted() {
        this.getBuliang();
    },
};
</script>

<style scoped lang="scss">
.data-content {
    // border-bottom: 1px solid #efefef;
    padding: 20px 15px;
    .layui-table {
        width: 100%;
        border-collapse: collapse;
    }
    .layui-table td,
    .layui-table th {
        padding: 12px 10px;
        text-align: center;
        border: 1px solid #ddd;
        font-size: 15px;
    }
    .layui-table tr th {
        background: #f9f9f9;
        color: #333;
        position: inherit;
    }
}
</style>
